<template>
	<view class="placeOrder">


		<view class="t1">
			<view class="t3">
				<view>联系人信息</view>
				<view>
					<view>联系人</view>
					<input type="text" v-model="contactName" placeholder="请输入联系人">
				</view>
				<view>
					<view>联系方式</view>
					<input type="text" v-model="contactPhone" placeholder="请输入联系方式">
				</view>
			</view>


		</view>
		<view class="t4">
			<view class="t5">
				{{resData.storeName}}
				<image :src="imgUrl+'back@2x.png'" mode="widthFix"></image>
			</view>
			<view class="t6">
				<view class="t7">
					<view>
						<image class="img1" :src="resData.imageUrl"></image>
					</view>
					<view class="t8">
						<view>{{resData.title}}</view>
						<view>{{resData.goodsProperty}}</view>
						<view>
							<image v-if="resData.isMember==1" :src="imgUrl+'9.png'" mode="widthFix"></image>
							¥{{resData.costPrice }}
							<text>¥ {{resData.price}}</text>
						</view>
						<view>X{{resData.quantity}}</view>
					</view>
				</view>




			</view>

		</view>
		<view class="t9">
			<view>
				<view>
					产品小计
				</view>
				<view>
					<image class="img2" v-if="resData.isMember==1" :src="imgUrl+'9.png'" mode="widthFix"></image>
					<text class="t10">¥{{orderDetail.payAmount}}</text>
					<text class="t12">¥{{orderDetail.orderAmount}}</text>
				</view>

			</view>
			<view @click="goTo('/subpkg/my/coupon')">
				<view>
					优惠券
				</view>
				<view>
					<text :class="seletyhq?'t11':''">{{seletyhq||'请选择优惠券'}}</text>
					<image class="img3" :src="imgUrl+'back@2x.png'" mode="widthFix"></image>

				</view>

			</view>
			<view>
				<view>
					减免
				</view>
				<view>
					无
				</view>

			</view>
		</view>

		<view class="t9 t09">

			<view @click="showMask">
				<view>
					自提时间
				</view>
				<view>
					<text class="t11">{{obj.takeTime}}</text>
					<image class="img3" :src="imgUrl+'back@2x.png'" mode="widthFix"></image>

				</view>

			</view>
			<view>
				<view>
					备注
				</view>
				<view>
					<input type="text" placeholder="请输入备注" v-model="remark">

				</view>

			</view>
		</view>


		<view class="t13">
			<view>选择支付方式</view>
			<view class="t14" @click="cardtype=4;payCardNO=''">
				<view>
					<image :src="imgUrl+'20.png'" mode="widthFix"></image>微信支付
				</view>
				<view>
					<image v-if="cardtype==4" src="../../static/img/13.png" mode="widthFix"></image>
					<image v-else :src="imgUrl+'21.png'" mode="widthFix"></image>
				</view>
			</view>
			<view class="t14" v-for="(item,idx) in contentList" :key="idx" v-if="item.gradename"
				@click="cardtype=3;payCardNO=item.cardno">
				<view>
					<image :src="imgUrl+'19.png'" mode="widthFix"></image>{{item.gradename}}
					<view class="t014">（ 余额
						¥{{item.totalmoney}} ）</view>
				</view>
				<view>
					<image v-if="cardtype==3" src="../../static/img/13.png" mode="widthFix"></image>
					<image v-else :src="imgUrl+'21.png'" mode="widthFix"></image>
				</view>
			</view>

		</view>
		<view class="btn">
			<view class="b1">
				实际支付
				<text>¥{{orderDetail.payAmount}}</text>
			</view>
			<view class="b2" @click="CreateOrder">
				付款
			</view>
		</view>
		<hTimeAlert v-if="isShow" title="选择时间" subhead="" rangeStartTime="10:00:00" rangeEndTime="20:00:00"
			defaultTime="2020/3/29 18:00:00" intervalTime="30" dayStartIntTime="0" rangeDay="7" :isShow="isShow"
			:maskHide="maskHide" :rangeType="rangeType" :closeBtn="closeBtn" @closeAlert="handelClose"></hTimeAlert>

	</view>
</template>

<script>
	import hTimeAlert from "@/components/h-time-alert/h-time-alert.vue";
	export default {
		data() {
			return {
				isShow: false,
				dateRange: "",
				maskHide: true,
				closeBtn: true,
				rangeType: true,
				imgUrl: this.imgUrl,
				obj: "",
				resData: "",
				orderDetail: "",
				contentList: [],
				contactPhone: "",
				contactName: "",
				remark: "",
				cardtype: 4,
				payCardNO: "",
				seletyhq: ""
			}
		},
		components: {
			hTimeAlert
		},
		onLoad(e) {
			console.log(e)
			this.obj = e
			this.BuyNow()
			this.OrderPreview()
			this.GetMyCard()
		},
		methods: {
			BuyNow() {
				this.$http.BuyNow({
					buyType: 1,
					count: this.obj.count,
					goodsBaseId: this.obj.goodsBaseId,
					goodsRelationId: this.obj.goodsRelationId,
					storeId: this.obj.storeId,
					storeRelationId: this.obj.storeRelationId,
					takeTime: this.obj.takeTime,
					vipPrice: this.obj.costPrice * 1,
					goodsQuantity: this.obj.count * 1,
				}).then(res => {
					this.resData = res.content


				})
			},
			OrderPreview() {
				var goodsList = [{
					goodsBaseId: this.obj.goodsBaseId,
					goodsQuantity: this.obj.count * 1,
					goodsRelationId: this.obj.goodsRelationId,
					price: this.obj.price * 1,
					vipPrice: this.obj.costPrice * 1,
				}]
				this.$http.OrderPreview({
					goodsList: goodsList,
					storeId: this.obj.storeId,
					price: this.obj.price,
					vipPrice: this.obj.costPrice * 1,
					goodsQuantity: this.obj.count * 1,

				}).then(res => {
					this.orderDetail = res.content

				})
			},
			GetMyCard() {

				this.$http.GetMyCard({


				}).then(res => {
					this.contentList = res.content

				})
			},
			CreateOrder() {
				if (!this.contactName) {
					uni.showToast({
						title: '请输入联系人',
						icon: 'none'
					})
					return
				}
				if (!this.contactPhone) {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none'
					})
					return
				}


				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!reg.test(this.contactPhone)) { //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的联系方式',
						icon: 'none'
					})
					return
				}
				var obj = {
					"orderType": 1,
					"discountList": [],
					"contactName": this.contactName,
					"takeTime": this.obj.takeTime,
					"payMethod": this.cardtype,
					"goodsList": [{
						"goodsBaseId": this.obj.goodsBaseId,
						"goodsQuantity": this.obj.coun * 1,
						"goodsRelationId": this.obj.goodsRelationId,
						"price": this.obj.price * 1,
						vipPrice: this.obj.costPrice * 1,
						goodsQuantity: this.obj.count * 1,
					}],
					"remark": this.remark,
					"contactPhone": this.contactPhone,
					"storeId": this.obj.storeId,
					"payCardNO": this.payCardNO,

				}
				uni.showLoading({
					title: '支付中'
				})

				this.$http.CreateOrder(obj).then(res => {
					console.log(res)
					if (res.code == 0) {
						if (this.cardtype == 3) {

							uni.showToast({
								title: '支付成功',
								icon: "none"
							})
							uni.hideLoading()
							setTimeout(() => {
								uni.reLaunch({
									url:"/pages/index/index?page=order"
								})
							}, 1000)
							return
						}
						let payData = JSON.parse(res.content.paymentrequest)
						console.log(payData)
						uni.hideLoading()
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: payData.timeStamp.toString(),
							nonceStr: payData.nonceStr,
							package: payData.package,
							signType: payData.signType,
							paySign: payData.paySign,
							success: res => {
								uni.showToast({
									title: '支付成功',
									icon: "none"
								})
								uni.hideLoading()
								setTimeout(() => {
									uni.reLaunch({
										url:"/pages/index/index?page=order"
									})
								}, 1000)
							},
							complete: res => {
								uni.hideLoading()

							}
						});


					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}

				})
			},
			showMask() {
				this.isShow = true;
				console.log(this.isShow);
			},

			handelClose(data) {
				this.isShow = false;
				this.obj.takeTime = data.dateRange
				console.log(data);
			},

		}
	}
</script>

<style scoped lang="scss">
	.placeOrder {
		padding-bottom: 120upx;

		.t2 {
			font-size: 34upx;
			font-weight: 400;
			color: #222222;
		}

		.t1 {
			margin: 22upx 20upx;
			height: 260upx;
			background: #FFFFFF;
			padding: 25upx 18upx;
			border-radius: 10px;

			.t3 {
				font-size: 28upx;
				font-weight: 400;
				color: #222222;

				>view {
					display: flex;
					align-items: center;
					margin-bottom: 40upx;

					>view:nth-child(1) {
						width: 160upx;
					}
				}

				>view:last-child {
					margin-bottom: 0;
				}
			}


		}

		.t4 {
			background: #FFFFFF;
			border-radius: 10upx;
			margin: 22upx 20upx;
			padding: 24upx 20upx;

			.t5 {
				display: flex;
				align-items: center;
				font-size: 32upx;
				font-weight: 400;
				color: #222222;

				image {
					width: 20upx;
					height: 20upx;
					margin-left: 12upx;
				}
			}

			.t6 {
				.t7 {
					display: flex;
					margin-top: 26upx;
					width: 100%;

					.img1 {
						width: 120upx;
						height: 120upx;
						border-radius: 10upx;
						margin-right: 14upx;
					}

					.t8 {
						position: relative;
						width: 100%;

						>view:nth-child(1) {
							font-size: 28upx;
							font-weight: 400;
							color: #222222;
						}

						>view:nth-child(2) {
							font-size: 24upx;
							font-weight: 400;
							margin: 14upx 0;
							color: #888888;
						}

						>view:nth-child(3) {
							font-size: 24upx;
							font-weight: 400;
							color: #222222;

							image {
								width: 56upx;
								height: 27upx;
								margin-right: 10upx;
							}

							text {
								font-size: 20upx;
								font-weight: 400;
								color: #888888;
							}
						}

						>view:nth-child(4) {
							font-size: 20upx;
							font-weight: 400;
							color: #888888;
							right: 0;
							bottom: 50upx;
							position: absolute;
						}
					}
				}




			}


		}

		.t9 {
			background: #fff;
			margin: 20upx;
			padding: 24upx 20upx;
			border-radius: 10upx;

			>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24upx;
				font-weight: 400;
				color: #888888;
				margin-bottom: 26upx;



				text {
					font-size: 24upx;
					font-weight: 400;
					color: #888888;
				}

				.t12 {
					font-size: 20upx;
					font-weight: 400;
					color: #888888;
				}

				.img2 {
					width: 56upx;
					height: 27upx;
					margin-right: 12upx;
				}

				.img3 {
					width: 26upx;
					height: 26upx;
					margin-left: 6upx;
					vertical-align: middle;
					margin-top: -6upx;
				}

				.t10 {
					font-size: 24upx;
					font-weight: 400;
					color: #222222;
					margin-right: 8upx;
				}

				.t11 {
					font-size: 24upx;
					font-weight: 400;
					color: #888888;
				}

			}

			>view:last-child {
				margin-bottom: 0;
			}
		}

		.t09 {
			>view {
				>view:nth-child(1) {
					font-size: 28upx;
					font-weight: 400;
					color: #222222;
				}
			}

			input {
				text-align: right;
			}
		}

		.t13 {
			font-size: 28upx;
			font-weight: 400;
			color: #222222;
			background: #fff;
			padding: 24upx 20upx;
			margin: 0 20upx;
			border-radius: 10upx;

			.t14 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40upx;

				>view {
					display: flex;
					align-items: center;


				}

				>view:nth-child(1) {
					width: 400upx;
				}

				image {
					width: 40upx;
					height: 37upx;
					margin-right: 10upx;
				}

				.t014 {
					color: #888888;
				}


			}



			>view:last-child {
				margin-bottom: 0;
			}
		}

	}

	.btn {
		width: 99%;
		height: 98upx;
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0px -1px 8upx 0px rgba(211, 211, 211, 0.71);
		border-radius: 49upx;
		position: fixed;
		bottom: 0;
		margin: 0;
		left: 50%;
		margin-left: -370upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.b1 {
			padding-left: 33upx;
			font-size: 24upx;
			font-weight: 400;
			color: #888888;

			text {
				font-size: 42upx;
				font-weight: 400;
				color: #222222;
				margin: 0 10upx;
			}

			image {
				width: 20upx;
				height: 20upx;
			}

		}

		.b2 {
			width: 240upx;
			height: 80upx;
			line-height: 80upx;
			background: linear-gradient(270deg, #01AD65 0%, #01AD65 65%, #01AD65 100%);
			border-radius: 100upx;
			font-size: 32upx;
			font-weight: 400;
			color: #F8F7F7;
			margin-right: 10upx;
		}
	}
</style>
